<template>
  <div class="left-top">
    <div class="headers_order_header">
      <div class="headers_right">
        <span>订单信息</span>
      </div>
      <div class="headers_left"></div>
    </div>
    <div class="content">
      <div class="content_box">
        <div class="content_box_top">
          <div class="content_box_top_one">
            订单项目号 <span class="content_box_top_one_span">{{xmbh  }}</span>
          </div>
          <div class="content_box_top_one">
            项目名称 <span class="content_box_top_one_span">{{obj.xmmc}}</span>
          
          </div>
          <div class="content_box_top_one">
            客户名称
            <span class="content_box_top_one_span"
              >{{obj.khmc}}</span
            >
          </div>
          <div class="content_box_top_one">
            客户编号 <span class="content_box_top_one_span">{{obj.khbh}}</span>
          </div>
        </div>
        <div class="content_box_bottom">
          合同备案号
          <span class="content_box_top_one_span"
            > <span class="content_box_top_one_span_title" v-for="(item,index) in obj.djh" :key="index">{{item}}</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
import { getNavbar } from "@/api/index";
export default {
  data() {
    return {
      selectedOption: "",
      selectedYear: "",
      selectedQuarter: "",
      obj:{}
    };
  },
  props: {
    xmbh: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.getlist();
  },
  methods: {
    //查询
    getlist() {
      if (!this.xmbh) {
 
      return; // 如果未传递，提前返回
    }
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.order.getOrderInfo",
        xmbh: this.xmbh,
        company:sessionStorage.getItem("company"),
      };
      getNavbar(param).then((res) => {
   
        this.obj=res.data;

      });
    },
    handleSelectChange() {
      this.selectedYear = "";
      this.selectedQuarter = "";
    },
    queryData() {
  
    },
  },
};
</script>
  
  <style scoped >
.titles {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 13px;
  color: #333333;
}

.hovered .titles {
  color: #1e4398; /* 鼠标悬停时标题颜色 */
  cursor: pointer;
}

.new-icon {
  margin-left: 4px; /* 新图标与标题之间的间距 */
  width: 36px;
  height: 18px;
}

.date {
  margin-left: auto; /* 日期靠右对齐 */
  font-size: 12px; /* 日期字体大小 */
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
.left-top {
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
  border-radius: 10px;
}

.headers_order_header {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.headers_order_header .headers_left span {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_right {
  display: flex;
}
.headers_right .headers_right_title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #666666;
  margin-left: 15px;
  cursor: pointer;
  transition: background 0.3s; /* 添加过渡效果 */
}
.headers_left_select {
  margin-right: 20px;
}
.headers_right  span {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_left {
  display: flex;
  align-items: center;
}

.headers_left /deep/.el-input__icon {
  height: 29px;
}
.headers_left_select /deep/.el-input__icon {
  height: 24px;
}
.year-picker {
  margin-right: 20px;
}
.headers_left_input {
  margin-right: 20px;
}
.headers_left_input /deep/ .el-input__icon {
  line-height: 29px !important;
}
.headers_left_more {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #1e4398;
  cursor: pointer;
}
.carous_img {
  width: 100%;
  height: 100%;
}

.headers_order_header span {
  border-left: 4px solid #1e4398;
  padding-left: 9px;
}

.content {
  margin-top: 10px; /* 内容与标题之间的间距 */
}
.content_box {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
  border-radius: 10px;
  padding: 24px;
}
.content_box_top {
  display: flex;
}
.content_box_top_one {
  flex: 0 0 20%;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 14px;
  color: #333333;
}
.content_box_top_one_span {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #666666;
  margin-left: 24px;
}
.content_box_top_one_span_title{
  margin-right: 10px;
}
.content_box_bottom {
  margin-top: 25px;
  flex: 0 0 20%;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 14px;
  color: #333333;
}
</style>
      